<template>
  <view class="login-page">
    <!-- 登录容器 -->
    <view class="login-container">
      <!-- logo区域（新增：适配新闻资讯APP主题，可替换为APP专属logo） -->
      <view class="logo">
        <image src="/static/logo.png" mode="widthFix"></image>
      </view>

      <!-- 表单区域（保留原有结构，优化交互提示） -->
      <view class="form-box">
        <!-- 用户名输入 -->
        <view class="input-item">
          <view class="icon">
            <uni-icons type="person" size="24" color="#D0021B"></uni-icons> <!-- 改为新闻APP主题红色 -->
          </view>
          <input 
            type="text" 
            v-model="username" 
            placeholder="请输入用户名/手机号" 
            placeholder-class="placeholder"
            maxlength="20"
          />
        </view>

        <!-- 密码输入 -->
        <view class="input-item">
          <view class="icon">
            <uni-icons type="locked" size="24" color="#D0021B"></uni-icons> <!-- 主题色统一 -->
          </view>
          <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码" 
            placeholder-class="placeholder"
            maxlength="16"
          />
          <!-- 新增：密码可见切换 -->
          <view class="eye-icon" @click="togglePwdVisible">
            <uni-icons :type="pwdVisible ? 'eye' : 'eye-slash'" size="24" color="#999"></uni-icons>
          </view>
        </view>

        <!-- 忘记密码（路径适配） -->
        <view class="forget-link">
          <text @click="goForget">忘记密码？</text>
        </view>

        <!-- 登录按钮（优化加载状态） -->
        <button 
          class="login-btn" 
          :disabled="isDisabled" 
          @click="handleLogin"
        >
          <uni-icons type="loading" size="24" color="#fff" v-if="isDisabled"></uni-icons>
          <text v-else>登录</text>
        </button>

        <!-- 注册入口（路径适配） -->
        <view class="register-area">
          <text>还没有账号？</text>
          <text class="register-link" @click="goRegister">立即注册</text>
        </view>

        <!-- 其他登录方式（保留，优化图标间距） -->
        <view class="other-login">
          <text class="line"></text>
          <text class="text">其他登录方式</text>
          <text class="line"></text>
        </view>
        <view class="social-login">
          <view @click="wechatLogin" class="social-icon">
            <uni-icons type="weixin" size="40" color="#07C160"></uni-icons>
          </view>
          <view @click="phoneLogin" class="social-icon">
            <uni-icons type="phone" size="40" color="#1296db"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 用户名/手机号
      password: '', // 密码
      isDisabled: false, // 登录按钮禁用状态
      pwdVisible: false, // 密码是否可见
      // 新增：本地缓存的用户信息（用于回显）
      cachedUser: uni.getStorageSync('userInfo') || {}
    };
  },
  onLoad(options) {
    // 优化：页面加载时回显缓存的用户名（不回显密码，保障安全）
    if (this.cachedUser.username) {
      this.username = this.cachedUser.username;
    }
    // 接收跳转来源（如从新闻详情页跳转，登录后返回详情页）
    this.fromPage = options.from || '';
  },
  methods: {
    // 新增：密码可见性切换
    togglePwdVisible() {
      this.pwdVisible = !this.pwdVisible;
      // 切换输入框类型（密码/文本）
      const pwdInput = uni.createSelectorQuery().in(this).select('.input-item input[type="password"]');
      pwdInput.fields({ node: true }, (res) => {
        if (res.node) {
          res.node.type = this.pwdVisible ? 'text' : 'password';
        }
      }).exec();
    },

    // 核心：处理登录逻辑（适配新闻APP登录后状态）
    handleLogin() {
      // 1. 表单验证（增强验证规则）
      if (!this.username.trim()) {
        return uni.showToast({ title: '请输入用户名或手机号', icon: 'none', duration: 1500 });
      }
      if (!this.password.trim()) {
        return uni.showToast({ title: '请输入密码', icon: 'none', duration: 1500 });
      }
      // 手机号格式验证（若输入手机号）
      const phoneReg = /^1[3-9]\d{9}$/;
      if (this.username.trim().length === 11 && !phoneReg.test(this.username.trim())) {
        return uni.showToast({ title: '请输入正确的手机号', icon: 'none', duration: 1500 });
      }

      // 2. 防止重复点击
      this.isDisabled = true;

      // 3. 模拟登录请求（实际项目替换为真实接口，如对接新闻APP后端）
      setTimeout(() => {
        // 登录成功：保存用户信息（含token，用于后续接口请求）
        const userInfo = {
          username: this.username.trim(),
          token: `news_token_${new Date().getTime()}`, // 模拟token
          avatar: '/static/icon/avatar-default.png', // 默认头像（新闻APP个人中心用）
          collectCount: 0 // 收藏数量（个人中心显示用）
        };
        uni.setStorageSync('userInfo', userInfo);

        // 4. 登录后跳转逻辑（适配不同来源页面）
        if (this.fromPage) {
          // 从其他页面（如新闻详情页）跳转，返回原页面
          uni.navigateBack({ delta: 1 });
        } else {
          // 默认返回个人中心（新闻APP“我的”页面）
          uni.reLaunch({ url: '/pages/mine/mine' });
        }

        // 5. 重置按钮状态
        this.isDisabled = false;

        // 6. 提示登录成功（符合新闻APP交互风格）
        uni.showToast({ title: `欢迎回来，${this.username.trim()}`, icon: 'none', duration: 1500 });
      }, 1500);
    },

    // 跳转到注册页（路径适配新闻APP目录结构）
    goRegister() {
      uni.navigateTo({ url: '/pages/register/register' });
    },

    // 跳转到忘记密码页（路径适配）
    goForget() {
      uni.navigateTo({ url: '/pages/forget/forget' });
    },

    // 微信登录（补充新闻APP场景提示）
    wechatLogin() {
      uni.showToast({ title: '微信登录功能开发中，暂支持账号密码登录', icon: 'none', duration: 2000 });
      // 实际逻辑：调用uni.login获取code，传给新闻APP后端换取token
      // uni.login({
      //   provider: 'weixin',
      //   success: (res) => {
      //     // 后端验证code，获取用户信息并登录
      //   }
      // });
    },

    // 手机号登录（路径适配）
    phoneLogin() {
      uni.navigateTo({ url: '/pages/phone-login/phone-login' });
    }
  }
};
</script>

<style scoped>
.login-page {
  background-color: #f5f7fa; /* 与新闻列表页背景色统一 */
  min-height: 100vh;
  padding-top: 80rpx;
  box-sizing: border-box;
}

.login-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* logo样式（优化适配） */
.logo {
  margin-bottom: 60rpx;
}
.logo image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid #f0f0f0; /* 增加边框，提升精致度 */
}

/* 表单样式 */
.form-box {
  width: 100%;
}

/* 输入框样式（优化主题色） */
.input-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 60rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  height: 90rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative; /* 用于密码眼睛图标定位 */
}
.icon {
  margin-right: 20rpx;
  width: 30rpx;
}
.input-item input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #333;
}
.placeholder {
  color: #ccc;
}
/* 新增：密码眼睛图标样式 */
.eye-icon {
  width: 30rpx;
  margin-left: 15rpx;
}

/* 忘记密码（优化颜色，与注册入口统一） */
.forget-link {
  text-align: right;
  margin: 15rpx 10rpx 30rpx 0;
}
.forget-link text {
  color: #D0021B; /* 改为新闻APP主题红色 */
  font-size: 26rpx;
}

/* 登录按钮（优化主题色，匹配文档要求） */
.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #D0021B; /* 新闻APP常用红色主题 */
  color: #fff;
  font-size: 32rpx;
  border-radius: 60rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx; /* 加载图标与文字间距 */
}
.login-btn[disabled] {
  background-color: #f1b2b2; /* 禁用状态红色弱化 */
}

/* 注册区域（优化颜色） */
.register-area {
  text-align: center;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 60rpx;
}
.register-link {
  color: #D0021B; /* 主题色统一 */
  margin-left: 10rpx;
  font-weight: 500;
}

/* 其他登录方式（优化样式） */
.other-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 40rpx;
}
.line {
  flex: 1;
  height: 1rpx;
  background-color: #eee;
}
.text {
  padding: 0 20rpx;
  color: #999;
  font-size: 24rpx;
}

/* 社交登录图标（优化点击区域） */
.social-login {
  display: flex;
  justify-content: center;
  gap: 80rpx; /* 增大图标间距 */
}
.social-icon {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f9f9f9;
}
</style>